<template>
  <div class="app-container">
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <span class="filter-title filter-item">身份所属</span>
      <k-select
        v-model="listQuery.userType"
        class="filter-item right-item"
        style="width:120px"
        :select-params="[{ label: '未绑码', value: -1 }, { label: '官方', value: 1 }, { label: '玩家', value: 3 }, { label: '主播', value: 2 }]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">认证时间</span>
      <k-date-picker v-model="createTime" class="filter-item right-item" @hqchang="handleFilter" />
    </div>
    <!--表格相关 -->
    <el-table
      :data="listData"
      border
      fit
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 30px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @sort-change="sortChange"
    >
      <el-table-column min-width="60px" type="index" label="序号" align="center" />
      <el-table-column prop="mobile" min-width="100px" label="用户名" align="center" />
      <el-table-column prop="userType" min-width="100px" label="身份所属" align="center">
        <template slot-scope="scope">
          {{ scope.row.userType == -1 ? '未绑码' : scope.row.userType == 1 ? '官方' : scope.row.userType == 3 ? '玩家' : scope.row.userType == 2 ? '主播' : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" min-width="100px" label="姓名" align="center" />
      <el-table-column prop="idCard" min-width="100px" label="身份证号" align="center" />
      <el-table-column prop="statusValue" min-width="100px" label="实名认证结果" align="center" />
      <el-table-column prop="createTime" min-width="100px" label="认证时间" align="center"/>
      <el-table-column prop="age" min-width="100px" sortable="custom" label="年龄" align="center" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="$refs.hqSearchDown.searchFun(1)"
    />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { listPage } from '@/api/avatar/index'
import hqSearchDown from '@/components/hqSearchDown' // 下拉搜索
import { getTime_s } from '@/utils/auth'

export default {
  name: 'Extension',
  components: { Pagination, hqSearchDown },
  dicts: ['IDENTITY_TYPE'],
  data() {
    return {
      // 下拉搜索项0
      selectOpts: [
        {
          label: '用户名',
          value: 'mobile'
        },
        {
          label: '认证结果',
          value: 'statusValue'
        },
        {
          label: '姓名',
          value: 'userName'
        },
        {
          label: '身份证号',
          value: 'idCard'
        }
      ],
      createTime: '',
      listData: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        userType: undefined, // 赠品外观',
        key: '', // 卡包名称或关键词 卡包配置界面所用'
        idCard: undefined, // 身份所属,
        startTime: undefined, // 最终创建时间",
        endTime: undefined, // 最早支付时间",
        mobile: undefined
      }
    }
  },
  watch: {
    createTime(val) {
      this.listQuery.startTime = this.createTime ? this.createTime[0] : null
      this.listQuery.endTime = this.createTime ? this.createTime[1] : null
    }
  },

  created() {
    this.loadData()
  },
  methods: {
    getTime_s,
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.loadData()
    },
    loadData(v) {
      listPage({ ...this.listQuery, ...v }).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
      })
    },
    // 搜索查询事件
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.pager.pageNo = 1
      this.loadData(v)
    }
  }
}
</script>

<style lang="scss" scoped>
    .filter-container {
      width: 100%;
      height: 48px;
      line-height: 48px;

      .filter-item {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      .right-item{
          margin-right: 10px;
        }
      .kInput {
        position: absolute;
        right: 20px;
      }

      .filter-title {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        font-weight: 500;
        margin-right: 22px;
        color: #14162E;
      }

      .user-item {
        margin-left: 10px;
        margin-right: 20px;
      }

      .user-status,
      .account-status {
        margin-right: 20px;
      }
    }

</style>
